<template>
	<view class="flex-column-c" style="margin-top: 50rpx;">
		<view class="" v-for="(item,index) in data.commentList" :key="item.id">
			<view class="" @click="clickLike(index)"
				style="margin-bottom: 50rpx;text-align: center; line-height: 30rpx;">
				id : {{item.id}} <uni-icons type="heart-filled" size="25"
					:color="item.isLike?  'red':'#c0c0c0'"></uni-icons> {{item.likeNum}}
			</view>
		</view>
	</view>

</template>
<script setup lang="ts">
	import { reactive } from 'vue';
	import { onLoad } from "@dcloudio/uni-app"
	const data = reactive({
		commentList: [
			{
				id: "10086",
				likeNum: 0,
				isLike: false
			},
			{
				id: "10087",
				likeNum: 0,
				isLike: false
			}
		]
	})
	//加载页面时获取到已点赞评论的list-id 进行赋值 
	onLoad(() => {
		data.commentList.forEach(item => {
			//获取本地已点赞评论的list-id
			var list : Array<string> = uni.getStorageSync("commontIds");
			//本地list 清除处理
			let flag = list.indexOf(item.id)
			if (flag != -1) {
				item.isLike = true;
			}
		})
	})

	//点赞总实现思路： 
	//用户点赞 likeNum++ isLike->true 本地保存用户点赞的评论id数组 作为一个List 
	//用户取消点赞 likeNum-- isLike->false 本地从list中删除用户点赞的评论id 
	//后端处理
	//数据库进行点赞的记录
	//扩展： 防止连续点赞
	//可参照性文档 https://juejin.cn/post/7119115588257087518
	//后端该评论点赞++ 防止连点器一直刷同一个点赞 redis k：v commontId：userIds List（锁用户id） 做一个简单的15分钟不可点赞的限制
	//取消点赞同理
	const clickLike = (index : number) => {
		//判断 isLike
		if (data.commentList[index].isLike) {
			//取消点赞
			data.commentList[index].isLike = false;
			//为零则不进行--
			if (data.commentList[index].likeNum > 0) {
				data.commentList[index].likeNum--;
			}
			var list : Array<string> = uni.getStorageSync("commontIds");
			//本地list 清除处理
			let flag = list.indexOf(data.commentList[index].id)
			list.splice(flag, 1);
			uni.setStorageSync("commontIds", list)
		} else {
			//点赞
			data.commentList[index].isLike = true;
			data.commentList[index].likeNum++;
			//本地list 添加处理
			var list : Array<string> = uni.getStorageSync("commontIds");
			if (!Array.isArray(list)) {
				list = [list];
			}
			list.push(data.commentList[index].id);
			console.log("==================" + list);
			uni.setStorageSync("commontIds", list)
		}
	}
</script>
<style>

</style>